<template>
  <view class="page">
    <view class="row">
      <image src="@/static/phone.png" class="icon"></image>
      <text class="left">手机</text>
      <text class="right">{{ info.mobile }}</text>
    </view>
    <view class="row">
      <image src="@/static/weixin.png" class="icon"></image>
      <text class="left">微信</text>
      <text class="right">{{ info.weixin }}</text>
      <!-- <image src="@/static/logo.png" class="code"></image> -->
    </view>
    <view class="row">
      <image src="@/static/qq.png" class="icon"></image>
      <text class="left">QQ</text>
      <text class="right">{{ info.qqNumber }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { getSysService } from "@/api/index";
const info = ref({});
const getInfo = async () => {
  const res = await getSysService();
  info.value = res;
};
getInfo();
</script>

<style>
page {
  background-color: #f9f9f9;
}

.row {
  position: relative;
  margin-top: 20rpx;
  margin-left: 30rpx;
  width: 691rpx;
  height: 126rpx;
  background: #ffffff;
  box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(0, 0, 0, 0.05);
  border-radius: 10rpx;
}

.icon {
  position: absolute;
  left: 86rpx;
  top: 39rpx;
  width: 48rpx;
  height: 48rpx;
}

.left {
  position: absolute;
  left: 156rpx;
  top: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 42rpx;
}

.right {
  position: absolute;
  right: 21rpx;
  top: 39rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #a0a0a0;
  line-height: 40rpx;
}

.code {
  position: absolute;
  right: 20rpx;
  top: 15rpx;
  width: 90rpx;
  height: 90rpx;
}
</style>
